<template>
  <div class="release-container pt-4">
    <v-layout justify-start align-start>
      <v-flex md8>
        <v-layout justify-start align-center wrap px-5>
          <v-flex md12>
            <p class="headline title-color">{{ $t('financial.apply') + $t('financial.refund') }}</p>
          </v-flex>
          <v-flex md12 d-flex align-center justify-space-between>
            <!-- 充值金额 -->
            <v-flex md4>
              <span
                class="subTitle title-color"
              >{{ $t('financial.refund') + $t('financial.amount') }} *</span>
            </v-flex>

            <v-flex md7>
              <v-text-field type="number" solo v-model="withdraw.amount" hide-details></v-text-field>
            </v-flex>
            <v-flex md1>RMB</v-flex>
          </v-flex>

          <v-flex md12 d-flex align-center justify-start>
            <!-- 充值方式 -->
            <v-flex md4>
              <span class="subTitle title-color">账户 *</span>
            </v-flex>

            <v-flex md6>
              <v-select :items="accounts" @change="onAccountChange" v-model="withdraw.account"></v-select>
            </v-flex>
          </v-flex>

          <v-flex md12 d-flex align-center justify-space-between>
            <!-- 充值方式 -->
            <v-flex md4>
              <span
                class="subTitle title-color"
              >{{ $t('financial.refund') + $t('financial.method') }} *</span>
            </v-flex>

            <v-flex md8>
              <v-radio-group v-model="account.payType">
                <v-radio
                disabled
                  v-for="(item, i) in topupTypes"
                  :key="i"
                  :label="item.text"
                  :value="item.value"
                  color="primary"
                ></v-radio>
              </v-radio-group>
            </v-flex>
          </v-flex>

          <v-flex md12 d-flex align-center justify-space-between>
            <!-- 充值方式 -->
            <v-flex md4>
              <span
                class="subTitle title-color"
              >收款人 *</span>
            </v-flex>

            <v-flex md8 text-xs-left subheading>
              {{ account.trueName }}
            </v-flex>
          </v-flex>

          <v-flex md12 mt-4 d-flex align-center justify-start>
            <v-flex md3></v-flex>
            <v-flex md4>
              <v-btn large round color="primary" @click="onSubmit">
                <span class="title">{{ $t('base.submit')}}</span>
              </v-btn>
            </v-flex>
            <v-flex md3>
              <v-btn large round class="title" dark color="dark" @click="onReset">
                <span>{{ $t('base.reset')}}</span>
              </v-btn>
            </v-flex>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </div>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Bill, User } from "@/api";
import { ProfitIncome } from "@/api/bean";
import Cookie from "js-cookie";
import { KV } from "@/utils/type";
declare const $Vue: Vue;

@Component({})
export default class ReleaseTask extends Vue {
  private topupTypes: Array<KV> = [];

  private defaultWithdraw: any = {
    payType: 1,
    amount: 1
  };

  private withdraw: any = {
    createTime: "",
    account: {},
  };

  private accounts: any = [];
  private account: any = {};

  private currentDate: string = "";

  protected mounted() {
    $Vue.$emit("title", { message: this.$t("base.withdraw").toString() });

    this.onReset();

    this.topupTypes = [
      {
        text: this.$t("financial.alipay").toString(),
        value: 1
      },
      {
        text: this.$t("financial.wechatpay").toString(),
        value: 2
      }
    ];

    this.getAccountList();

  }

  private onSubmit() {
    if (this.validate()) {
      // this.submitWithdraw();
      console.log(this.withdraw)
    } else {
      $Vue.$emit("snackbar", {
        message: this.$t("financial.pleaseEnterRightNumber")
      });
    }
  }

  private onDialogConfirm() { }

  private onReset() {
    this.withdraw = Object.assign({}, this.defaultWithdraw);
  }

  private validate(): boolean {
    let amount = this.withdraw.amount;
    if (amount !== "" && !Number.isNaN(Number(amount))) {
      if (amount <= 0) {
        $Vue.$emit("snackbar", {
          message: "充值金额需大于0"
        });
        return false;
      }
      return true;
    }
    return false;
  }

  private onAccountChange(value: any) {
    let account;
    this.accounts.forEach((item: any) => {
      if (item.value === value) {
        account = item;
      }
    });
    this.account = account;
  }

  private async getAccountList(queryForm?: any) {
    let params: any = {
      userId: Cookie.get("seller_userId"),
      offset: 0,
      limit: 1000,
    };
    if (queryForm) {
      params = queryForm;
      params.userId = Cookie.get("seller_userId");
    }
    const { data } = await User.getAccountList.r(params);
    console.log("getAccountList", data);
    if (data.result === 0) {
      let $data = data.data;
      if ($data) {
        let list: any = [];
        $data.dataList.forEach((item) => {
          list.push({
            text: item.account,
            payType: item.payType,
            trueName: item.trueName,
            value: item.account
          });
        })
        this.accounts = list;
      } else {
      }
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }
  private async submitWithdraw() {
    const params: ProfitIncome = {
      incomeType: 2, // 1 充值
      userId: Number(Cookie.get("seller_userId")),
      amount: this.withdraw.amount,
      paymentNo: this.withdraw.account,
      payType: this.withdraw.payType,
      currency: 'CNY'
    };
    const { data } = await Bill.saveBill.r(params);
    console.log("submitWithdraw", data);
    $Vue.$emit("snackbar", {
      message: data.message
    });
    $Vue.$emit("balance");

    if (data.result === 0) {
      // this.$router.go(-1);
    } else {
    }
  }
}
</script>

<style lang="less" scoped>
.droppable {
  border-radius: 4px;
  height: 8rem;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  .preview-image {
    height: 100%;
  }
  .upload-tip {
    margin: 1rem;
  }
  .cloud-icon {
    margin-top: 2rem;
  }

  .file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
    top: 0;
    &:hover {
      cursor: pointer;
    }
  }
}
#preview {
  height: 18rem;
  border: 1px dashed #888;
  border-radius: 8px;
}

.qrcode {
  width: 18rem;
}
</style>


